<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <!-- router指令在menu加 -->
      <!-- unique-opened表示一次只能展开一个 -->
      <!-- default-active表示默认高亮，设置为当前打开的页面 -->
      <el-menu router  unique-opened :default-active="$route.path">
        <el-submenu router index="1">
          <template slot="title"
            ><i class="el-icon-message"></i>内容管理</template
          >

          <el-menu-item-group>
            <template slot="title">物品</template>
            <el-menu-item index="/items/create">新增物品</el-menu-item>
            <el-menu-item index="/items/list">物品展示</el-menu-item>
          </el-menu-item-group>

          <el-menu-item-group>
            <template slot="title">英雄</template>
            <el-menu-item index="/heroes/create">新增英雄</el-menu-item>
            <el-menu-item index="/heroes/list">英雄展示</el-menu-item>
          </el-menu-item-group>

          <el-menu-item-group>
            <template slot="title">文章</template>
            <el-menu-item index="/articles/create">新增文章</el-menu-item>
            <el-menu-item index="/articles/list">文章管理</el-menu-item>
          </el-menu-item-group>


        </el-submenu>
        <el-submenu router index="2">
          <template slot="title"
            ><i class="el-icon-message"></i>系统管理</template>

          <el-menu-item-group>
            <template slot="title">分类</template>
            <el-menu-item index="/categories/create">新建分类</el-menu-item>
            <el-menu-item index="/categories/list">分类展示</el-menu-item>
          </el-menu-item-group>

          <el-menu-item-group>
            <template slot="title">管理员</template>
            <el-menu-item index="/adminusers/create">新建管理员账户</el-menu-item>
            <el-menu-item index="/adminusers/list">管理员账户管理</el-menu-item>
          </el-menu-item-group>

        </el-submenu>


        <el-submenu router index="3">
          <template slot="title"
            ><i class="el-icon-message"></i>运营管理</template>

          <el-menu-item-group>
            <template slot="title">广告</template>
            <el-menu-item index="/advs/create">新增广告位</el-menu-item>
            <el-menu-item index="/advs/list">广告位管理</el-menu-item>
          </el-menu-item-group>

        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown @command='handleCommand'> 
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item >注销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{name}}</span>
      </el-header>
      <el-main>
        <!-- 新编和编辑公用同一个组件，无法区分，用：key让router根据路由路径进行区分(一个有id一个没有) -->
        <router-view :key="$route.path"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
.el-header {
  background-color: #a8b8cd;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
export default {
  name: "Main",
  data() {
    return {
      name:''
    };
  },
  methods: {
    handleCommand(){
        this.$confirm('此操作将注销当前账户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sessionStorage.token=''
          this.$message({
            type: 'success',
            message: '注销成功!'
          });
          this.$router.push('/')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消注销'
          });          
        })
    }
  },
  created() {
    //实现功能：获取当前账户的名字，传到this.name中
    //在登录接口那登录成功了query传值  注意parmas和query都存在$route里面，而props可以直接声明出来（虽然也在$toute.props里面）
    this.name=this.$route.query.name
  },
};
</script>